<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能出题 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .exercise-type-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .exercise-type-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .exercise-type-card.selected {
            border: 2px solid #40e0d0;
        }
        .vocab-preview {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin: 15px;
        }
        .vocab-chip {
            display: inline-block;
            background: #f0f0f0;
            padding: 5px 12px;
            border-radius: 15px;
            margin: 4px;
            font-size: 0.9rem;
        }
        .vocab-chip.selected {
            background: #40e0d0;
            color: white;
        }
        .options-section {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin: 15px;
        }
        .generate-btn {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #40e0d0;
            color: white;
            padding: 12px 30px;
            border-radius: 25px;
            border: none;
            box-shadow: 0 4px 12px rgba(64, 224, 208, 0.3);
        }
        .generate-btn:disabled {
            background: #ccc;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .loading-content {
            text-align: center;
        }
        .spinner {
            width: 50px;
            height: 50px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="index.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">智能出题</h5>
    </div>

    <!-- 选择题型 -->
    <div class="exercise-type-card" onclick="selectExerciseType(this, 'reading')">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-2">阅读理解</h5>
                <p class="text-muted mb-0">根据生词生成阅读文章和题目</p>
            </div>
            <i class="bi bi-book fs-3"></i>
        </div>
    </div>

    <div class="exercise-type-card" onclick="selectExerciseType(this, 'translation')">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-2">翻译</h5>
                <p class="text-muted mb-0">生成包含目标词汇的翻译题</p>
            </div>
            <i class="bi bi-translate fs-3"></i>
        </div>
    </div>


    <!-- 生成选项 -->
    <div class="options-section">
        <h6 class="mb-3">设置选项</h6>
        <div class="mb-3">
            <label class="form-label">生词数量</label>
            <select class="form-select">
                <option>5</option>
                <option selected>10</option>
                <option>50</option>
            </select>
        </div>
    </div>

    <!-- 生成按钮 -->
    <button class="generate-btn" onclick="generateExercise()">
        开始生成
    </button>

    <!-- 加载遮罩 -->
    <div class="loading-overlay">
        <div class="loading-content">
            <div class="spinner-border text-primary spinner" role="status"></div>
            <div>正在生成中，请稍候...</div>
            <small class="text-muted">预计需要15秒</small>
        </div>
    </div>

    <script>
        let selectedType = null;
        let selectedVocabs = new Set();

        function selectExerciseType(element, type) {
            // 移除其他卡片的选中状态
            document.querySelectorAll('.exercise-type-card').forEach(card => {
                card.classList.remove('selected');
            });
            
            // 选中当前卡片
            element.classList.add('selected');
            selectedType = type;
            
        }

        function toggleVocab(element) {
            element.classList.toggle('selected');
            
            if (element.classList.contains('selected')) {
                selectedVocabs.add(element.textContent);
            } else {
                selectedVocabs.delete(element.textContent);
            }
            
        }

        function updateGenerateButton() {
            const generateBtn = document.querySelector('.generate-btn');
            generateBtn.disabled = !selectedType || selectedVocabs.size < 3;
        }

        function generateExercise() {
            // 显示加载遮罩
            document.querySelector('.loading-overlay').style.display = 'flex';
            
            // 模拟生成过程
            setTimeout(() => {
                // 隐藏加载遮罩
                document.querySelector('.loading-overlay').style.display = 'none';
                
                // 根据题型跳转到不同页面
                if (selectedType === 'reading') {
                    window.location.href = 'ai-reading.html';
                } else {
                    window.location.href = 'ai-translation.html';
                }
            }, 2000);
        }
    </script>
</body>
</html>